<template>
  <div id="Map" style="width: 100%; height: 100%" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: 'MaskMap',
  data() {
    return {
      map: null,
      Amap: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // eslint-disable-next-line no-undef
      AMapLoader.load({
        key: 'dd06077e770b56c4f0a313c520a4d781', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['Map3D', 'AMap.DistrictSearch', 'AMap.MouseTool', 'AMap.PolyEditor'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // eslint-disable-next-line no-undef
          this.map = new AMap.Map('Map', {
            center: [119.978742, 30.273705],
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130,
            pitch: 40,
            zoom: 14,
            layers: [
              // eslint-disable-next-line no-undef
              new AMap.TileLayer.RoadNet({
                // rejectMapMask:true
              }),
              // eslint-disable-next-line no-undef
              new AMap.TileLayer.Satellite()
            ]
          });
          this.map.on('zoomend', (e) => {
            console.log('zoom', e)
          });
          this.drawer()
        })
        .catch((e) => {
          console.log(e);
        });
    },
    startDrawer() {
      this.drawer()
    },
    drawer() {
      const that = this
      const mouseTool = new AMap.MouseTool(this.map);
      // 监听draw事件可获取画好的覆盖物
      const overlays = [];
      mouseTool.on('draw', function(e) {
        that.map.clearMap();
        overlays.push(e.obj);
        // 获取路径
        const path = e.obj.getPath()
        console.log('path', path)
        that.setArea(AMap, path)
        const polygon = new AMap.Polygon({
          path: path,
          fillColor: '#00b0ff',
          strokeColor: '#80d8ff',
          lineJoin: 'round' // 折线拐点连接处样式
        });
        that.map.add(polygon);
        // 实例化图形编辑
        const polyEditor = new AMap.PolyEditor(that.map, polygon);
        console.log('polyEditor', polyEditor.open)
        polyEditor.open();
        polyEditor.on('addnode', function(event) {
          console.info('触发事件：addnode')
        })

        polyEditor.on('adjust', function(event) {
          console.log('你动我了', event, polygon.getPath());
          that.setArea(AMap, polygon.getPath())
          // 编辑了
        })

        polyEditor.on('removenode', function(event) {
          console.info('触发事件：removenode')
        })

        polyEditor.on('end', function(event) {
          // event.target 即为编辑后的多边形对象
          // 多边形的坐标
          console.log(event.target.getPath())
        })
      })

      function draw(type) {
        switch (type) {
          case 'marker': {
            mouseTool.marker({
              // 同Marker的Option设置
            });
            break;
          }
          case 'polyline': {
            mouseTool.polyline({
              strokeColor: '#80d8ff'
              // 同Polyline的Option设置
            });
            break;
          }
          case 'polygon': {
            const polygon = mouseTool.polygon({
              fillColor: '#00b0ff',
              strokeColor: '#80d8ff'
              // 同Polygon的Option设置
            });
            console.log(polygon)
            break;
          }
          case 'rectangle': {
            mouseTool.rectangle({
              fillColor: '#00b0ff',
              strokeColor: '#80d8ff'
              // 同Polygon的Option设置
            });
            break;
          }
          case 'circle': {
            mouseTool.circle({
              fillColor: '#00b0ff',
              strokeColor: '#80d8ff'
              // 同Circle的Option设置
            });
            break;
          }
        }
      }
      draw('polygon')
    },
    setArea(AMap, path) {
      this.$emit('set-area', {
        area: Math.round(AMap.GeometryUtil.ringArea(path)),
        perimeter: Math.round(AMap.GeometryUtil.distanceOfLine(path))
      })
    }
  }
};
</script>

<style>
#mapContent {
  background-color: transparent !important;
}
</style>
